import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';

export default class AntForm extends Component {
  constructor() {
    super()
    this.state = {
      picUrl: '',
      layout: {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      },
      tailLayout: {
        wrapperCol: {
          offset: 8,
          span: 16,
        },
      },

    }
  }
  Demo = () => {
    const onFinish = (values) => {
      console.log('Success:', values);
    };
  
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    }
  }
  componentWillMount() {
    this.getData();
  }
  getData() {
    this.$axios('https://api.imjad.cn/cloudmusic/?type=detail&id=28012031')
      .then(res => {
        this.setState({
          picUrl: res.data.songs[0].al.picUrl
        })
      })
      .catch(err => {
        console.log(err);
      })
  }
  render() {
    return (
      <div>
        <p>使用antd的form组件写一个表单</p>
        <img src={this.state.picUrl} />
        {/* <Button onClick={this.getData.bind(this)}>发请求</Button> */}
        <Form
          {... this.state.layout}
          name="basic"
          initialValues={{
            remember: true,
          }}
          onFinish={this.Demo.onFinish}
          onFinishFailed={this.Demo.onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item {... this.state.tailLayout} name="remember" valuePropName="checked">
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <Form.Item {...this.state.tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
        </Button>
          </Form.Item>
        </Form>
  );
      </div>
    )
  }
}
